<!--
 * @Description: 个人资料
 * @Author: liu (1427179517@qq.com)
 * @Date: 2023-04-23 14:35:17
 * @LastEditors: liu (1427179517@qq.com)
 * @LastEditTime: 2023-05-15 10:09:31
 * @FilePath: \jiekuan-app\src\subPages\other\personal.vue
-->

<template>
	<div class="page" :style="pageBackground">
		<div class="page-header" id="header">
			<div class="top u-flex u-row-between u-col-center" id="top">
				<div class="back_icon_padding" @click="handleClick({ type: 'return' })">
					<image src="../../static/images/back.png" class="back_icon" alt="" />
				</div>
				<div class="u-flex u-col-center">
					<div class="last">{{ info_data.distances }}·{{ info_data.updates }}</div>
					<image src="../../static/images/setting.png" class="setting_icon u-m-l-26" @click="isPopup = true"
						alt="" />
				</div>
			</div>
		</div>
		<div class="page-content u-p-0">
			<scroll-view scroll-y="true" class="" :style="contentHeight">
				<div class="header_box">
					<div class="text-center u-p-t-52">
						<image :src="info_data.icon" class="avatar" alt="" />
						<div class="u-m-t-24 name">{{ info_data.nickname }}</div>
						<div class="u-flex u-m-t-24 all-center">
							<div class="tags u-flex u-col-center u-p-l-6"
								v-if="info_data.authTags && info_data.authTags.length">
								<image src="../../static/images/verify.png" class="icon" alt="" />
								<span class="u-m-l-6">真人认证</span>
							</div>
							<div class="tags u-flex u-col-center u-p-l-6 u-m-l-20"
								v-if="info_data.umsAlbums && info_data.umsAlbums.length">
								<image src="../../static/images/play.png" class="icon" alt="" />
								<span class="u-m-l-6">视频相册</span>
							</div>
						</div>
						<div class="flex u-m-t-25 msg_tags_box">
							<div class="msg_tags u-m-r-20" v-if="gender_msg[info_data.gender] || info_data.age">
								{{ gender_msg[info_data.gender] }} <span
									v-if="gender_msg[info_data.gender] && info_data.age">·</span><span
									v-if="info_data.age">{{ info_data.age }}岁</span>
							</div>
							<!-- <div class="msg_tags u-m-r-20">宁波市</div> -->
							<!-- <div class="msg_tags u-m-r-20">小鸟依人</div>
              <div class="msg_tags u-m-r-20">健身</div> -->
							<template v-if="tagsList && tagsList.length">
								<div class="msg_tags u-m-r-20" v-for="(item, index) in tagsList" :key="index">
									{{ item }}
								</div>
							</template>
						</div>
						<div class="u-m-t-26 signature">{{ info_data.personalizedSignature }}</div>
					</div>
				</div>
				<div class="u-rela content_box">
					<div class="box u-p-30">
						<div class="">查看微信</div>
						<div class="vip_box u-m-t-12 u-flex u-col-center u-row-between">
							<div>
								<div class="u-flex u-col-center">
									<image src="../../static/images/wechat.png" class="wechat_icon u-m-r-18" alt="" />
									<span class="wechat">{{ info_data.wechatAccount }}</span>
								</div>
								<div class="u-flex u-col-center u-m-t-10">
									<span>升级</span>
									<image src="../../static/images/personal_vip.png" class="vip_icon u-m-r-10 u-m-l-10"
										alt="" />
									<span class="">免费解锁</span>
								</div>
							</div>
							<div class="open_vip" @click="handleClick({ type: 'vip' })">立即解锁</div>
						</div>
						<div class="u-m-t-25">相册</div>
						<div class="u-m-t-5 album flex">
							<template v-if="info_data.umsAlbums && info_data.umsAlbums.length">
								<div class="imgs_box u-rela" v-for="(item, index) in info_data.umsAlbums" :key="index"
									@click="handleClick({ type: 'previewImage', index: index })">
							
									<div class="mask u-abso" v-if="item.readType"></div>
									<image src="../../static/images/play_icon.png" class="play" alt="" v-if="item.sourceType" />
									<div class="burn" v-if="item.readType">
										<image src="../../static/images/fire.png" class="fire" alt="" />
										<div class="u-m-t-16">阅后即焚照片</div>
									</div>
								</div>
							</template>
							<!-- <div class="imgs" v-if="info_data.umsAlbums && info_data.umsAlbums.length">
								<div class="imgs_view" v-for="(item,index) in info_data.umsAlbums" :key="index">
									<div class="imgs_view_img">
										<video v-if="item.sourceType == 1" :src="item.sourceUrl"></video>
										<image @click="preview_img(item.sourceUrl)" v-else :src="item.sourceUrl"
											mode="aspectFill"></image>
										<div v-if="item.sourceType == 1" @click="preview_video(item.sourceUrl)">
										</div>
									</div>
								</div>
							</div> -->
							<template v-else>
								<div class="hint_text">暂无照片</div>
							</template>
							<div class="popup" v-if="video_url">
								<image @click="video_url = null" src="../../static/images/authentication_close.png"
									mode=""></image>
								<video :src="video_url"></video>
							</div>
						</div>

						<!-- 评价 -->
						<div class="u-m-t-25 u-flex u-col-center u-row-between evaluate">
							<span>评价10+</span>
							<span class="evaluate_text">综合评分：4.0</span>
						</div>
						<div class="flex u-m-t-22">
							<div class="evaluate_item u-flex all-center u-m-r-40 u-m-b-15">
								<span class="u-m-r-10">身材</span>
								<template v-for="(item, index) in 5">
									<image src="../../static/images/star_active.png" class="star_icon u-m-l-5" alt=""
										:key="index" />
								</template>
							</div>
							<div class="evaluate_item u-flex all-center u-m-r-40 u-m-b-15">
								<span class="u-m-r-10">颜值</span>
								<template v-for="(item, index) in 5">
									<image src="../../static/images/star_active.png" class="star_icon u-m-l-5" alt=""
										:key="index" />
								</template>
							</div>
							<div class="evaluate_item u-flex all-center u-m-r-40 u-m-b-15">
								<span class="u-m-r-10">耐心</span>
								<template v-for="(item, index) in 5">
									<image src="../../static/images/star.png" class="star_icon u-m-l-5" alt=""
										:key="index" />
								</template>
							</div>
							<div class="evaluate_item u-flex all-center u-m-r-40 u-m-b-15">
								<span class="u-m-r-10">情商</span>
								<template v-for="(item, index) in 5">
									<image src="../../static/images/star_active.png" class="star_icon u-m-l-5" alt=""
										:key="index" />
								</template>
							</div>
						</div>
						<!-- 动态 -->
						<div class="u-flex u-col-center u-row-between">
							<span>动态</span>
							<div class="u-flex col-center">
								<span class="see_all u-m-r-12">查看全部</span>
								<u-icon name="arrow-right" color="#fff" size="23"></u-icon>
							</div>
						</div>
					</div>
					<div class="item u-flex u-m-t-30" v-for="(item, index) in listData" :key="item.contentId"
						@click.stop="handleClick({ type: 'details', item: item })">
						<image :src="info_data.icon" class="avatar u-m-r-15" alt="" />
						<div class="item_right">
							<div class="u-flex u-col-center u-row-between flex-1">
								<div class="u-flex u-col-center">
									<span class="name">{{ info_data.nickname }}</span>
									<image src="../../static/images/star_vip.png" v-if="item.memberLevelId"
										class="vip u-m-l-20" alt="" />
										<blockquote v-for="(item,index) in info_data" :key="index">
											<div class="tags u-flex u-col-center u-p-l-6 u-m-l-20"
												v-if="item == '真人认证'">
												<image src="../../static/images/verify.png" class="icon" alt="" />
												<span class="u-m-l-6">真人认证</span>
											</div>
											<div class="tags u-flex u-col-center u-p-l-6 u-m-l-20"
												v-if="item == '视频相册'">
												<image src="../../static/images/play.png" class="icon" alt="" />
												<span class="u-m-l-6">视频相册</span>
											</div>
										</blockquote>
								</div>
								<div class="time">{{ item.updates }}</div>
							</div>
							<div class="age u-m-t-26" v-if="gender_msg[info_data.gender] || info_data.age">
								{{ gender_msg[info_data.gender] }} <span
									v-if="gender_msg[info_data.gender] && info_data.age">·</span><span
									v-if="info_data.age">{{ info_data.age }}岁</span>
							</div>
							<div class="information u-m-t-30">{{ item.contentText }}</div>
							<div class="flex u-m-t-20" v-if="item.imgList && item.imgList.length">
								<image :src="item2" @click="preview_img(item2)" class="imgs" v-for="item2 in item.imgList" :key="item2" alt="" />
							</div>
							<div class="u-flex u-col-center u-row-between"
								:class="item.imgList && item.imgList.length ? 'u-m-t-10' : 'u-m-t-30'">
								<div class="u-flex u-col-center address">
									<image src="../../static/images/location2.png" class="location2 u-m-r-10" alt="" />
									<span>{{ item.detailLocation }}</span><span
										v-if="item.detailLocation && item.distances">· </span><span
										v-if="item.distances">{{ item.distances }}</span>
								</div>
								<div class="u-flex u-col-center other">
									<div class="u-flex u-col-center"
										@click.stop="handleClick({ type: 'attention', item: item, index: index })">
										<image :src="
                        item.likeFlag ? '../../static/images/attention.png' : '../../static/images/no_attention.png'
                      " class="attention_icon u-m-r-12" alt="" />
										<span>{{ item.likeCounts }}</span>
									</div>
									<!-- <div class="u-flex u-col-center u-m-l-54">
										<image :src="'../../static/images/say_hello.png'"
											class="say_hello_icon u-m-r-12" alt="" />
										<span>打招呼</span>
									</div> -->
								</div>
							</div>
						</div>
					</div>
					<div class="btn_box u-flex">
						<div class="u-flex all-center left_btn u-m-r-76" @click="handleClick({ type: 'private_chat' })">
							<image src="../../static/images/chat2.png" class="chat2 u-m-r-16" alt="" />
							私聊
						</div>
						<div class="u-flex all-center right_btn">
							<image
								:src="info_data.likeFlag ? '../../static/images/attention.png' : '../../static/images/heart2.png'"
								class="heart2 u-m-r-15" alt="" @click="handleClick({ type: 'like' })" />
							喜欢
						</div>
					</div>
				</div>
			</scroll-view>
		</div>
		<!-- 操作菜单 -->
		<u-popup v-model="isPopup" mode="bottom" safe-area-inset-bottom border-radius="30">
			<view class="pop_box">
				<button class="pop_btn" @click="apiPostBlockMember">拉黑</button>
				<button class="pop_btn u-m-t-20" @click="handleClick({ type: 'feedback' })">举报</button>
				<button class="pop_btn pop_btn_cancel" @click="isPopup = false">取消</button>
			</view>
		</u-popup>
		<!-- 图片点击预览 -->
		<u-popup v-model="isPreviewImage" mode="center" width="100%" heigth="100vh">
			<scroll-view class="scrollPreviewImage" :scroll-into-view="previewImage_id" scroll-x>
				<view :id="previewImageId" class="previewImage_item"
					@click="handleClick({ type: 'close_preview' })">
					<image v-if="sourceType == 0" :src="previewUrl" class="previewImage" mode="" />
					<div class="mask u-abso" v-if="readType"
						@longpress="handleClick({ type: 'close_mask'})">
						<span class="mask_text">长按后可显示</span>
					</div>
				</view>
			</scroll-view>
		</u-popup>
		<div class="page-footer"></div>
	</div>
</template>

<script>
	import {
		joinGroup,
		imlogin
	} from '@/utils/hx/WebIM'
	export default {
		name: 'Personal', // 页面名称
		components: {}, // 挂载组件
		props: {}, // 组件传值
		data() {
			return {
				id: 0, // 用户id
				cmemberId:0, //当前用户id
				info_data: {}, // 用户资料
				listData: [], // 数据列表
				contentHeight: '', // 列表滚动高度
				isPopup: false, // 操作弹窗
				gender_msg: {
					0: '未知',
					1: '男',
					2: '女',
				}, // 性别
				tagsList: [], // 标签
				imgList: [], // 图片列表
				isPreviewImage: false, // 图片预览弹窗
				pageBackground: '', // 顶部背景
				previewImage_id: '', // 预览图片id
				video_url: "",
				previewUrl: "", //预览的图片地址
				previewImageId: 0,
				showIndex: 0,
				readType: 0,
				sourceType: 0
			}
		},
		computed: {}, // 计算机属性 类似与data概念
		watch: {}, // 监控data中数据变化
		onLoad(options) {

		},
		created() {

		}, // 生命周期-创建完成(可以访问当前this实例)
		mounted() {
			this.getContentHight()
		}, // 生命周期-挂载完成(可以访问DOM元素)
		methods: {
			// 页面点击事件
			handleClick(options) {
				const {
					type,
					item,
					index,
					query = {
                        id:this.$route.query.id,
						n:this.$route.query.n,
					}
				} = options
				switch (type) {
					case 'return':
						uni.navigateBack()
						break
					case 'private_chat': // 私聊
						if(this.cmemberId == this.id){
							this.$toast('不能向自己发起会话')
							return;
						}else{
							this.$jump({
								name: 'chat',
								query
							})
						}
						break
					case 'like': // 喜欢用户
						this.apiPostfollowMember()
						break
					case 'attention': // 喜欢动态
						this.apiPostDmContentLikeContent(item, index)
						break
					case 'previewImage': // 预览
						this.showIndex = index
						this.readType = this.info_data.umsAlbums[index].readType
						this.sourceType = this.info_data.umsAlbums[index].sourceType
						if(this.sourceType ==1){
							var that = this;
							that.video_url = this.info_data.umsAlbums[index].sourceUrl;
						}
						
						this.previewUrl=''
						this.previewImage_id = 'previewImage' + index
						this.isPreviewImage = true
						this.previewImageId = this.previewImage_id
						console.log('预览:'+this.previewImage_id)
						break
					case 'close_preview': // 关闭预览
						this.isPreviewImage = false
						break
					case 'close_mask': // 关闭遮罩
						const indexmk = this.showIndex;
						this.previewUrl = this.info_data.umsAlbums[indexmk].sourceUrl
						this.apiPreviewImg(this.info_data.umsAlbums[indexmk].id)
						this.sourceType = this.info_data.umsAlbums[indexmk].sourceType
						if(this.sourceType ==1){
							this.isPreviewImage = false
						}
						this.readType =0
						this.$set(this.info_data.umsAlbums[indexmk], 'readType', 0)
						setTimeout(() => {
							this.$set(this.info_data.umsAlbums[indexmk], 'sourceUrl', '')
						}, 3000)
						break
					default:
						this.$jump({
							name: type,
							query
						})
						break
				}
			},
			apiPreviewImg(pid) {
				this.$u.api.PreviewImg({
					picId: pid
				}).then((res) => {
					
				})
			},
			// 喜欢用户
			apiPostfollowMember() {
				this.$showLoading('加载中...')
				this.$u.api.PostfollowMember({
					followedMemberId: this.id
				}).then((res) => {
					this.$set(this.info_data, 'likeFlag', this.info_data.likeFlag ? 0 : 1)
				}).finally(() => {
				  uni.hideLoading()
				})
			},
			// 点赞动态
			apiPostDmContentLikeContent(item, index) {
				const params = {
					type: item.likeFlag ? 1 : 0,
					contentId: item.contentId,
					likeType: 1,
				}
				this.$showLoading('加载中...')
				this.$u.api.PostDmContentLikeContent(params).then((res) => {
					this.$set(this.listData[index], 'likeFlag', item.likeFlag ? 0 : 1)
					this.$set(this.listData[index], 'likeCounts', item.likeFlag ? item.likeCounts + 1 : item
						.likeCounts - 1)
				}).finally(() => {
				  uni.hideLoading()
				})
			},
			// 拉黑
			apiPostBlockMember() {
				this.$showLoading('加载中...')
				this.$u.api.PostBlockMember({
					blockedMemberId: this.id
				}).then((res) => {
					this.$toast('拉黑成功')
				}).finally(() => {
				  uni.hideLoading()
				})
			},
			// 个人资料
			apiGetFetchMemberInfo() {
				this.$showLoading('加载中...')
				this.$u.api.GetFetchMemberInfo({
					memberId: this.id
				}).then((res) => {
					const {
						data
					} = res
					this.info_data = data
					if (data.icon) {
						this.pageBackground = ' background-image:url(' + data.icon + ')'
					}
					data.contentLists.forEach((item) => {
						if (item.contentUrl) {
							item.imgList = item.contentUrl.split(',')
						} else {
							item.imgList = []
						}
					})
					this.listData = data.contentLists
					if (data.umsAlbums && data.umsAlbums.length) {
						const list = []
						data.umsAlbums.forEach((item) => {
							list.push(item.sourceUrl)
						})
						this.imgList = list
					}
					if (data.tags) {
						const tagsList = data.tags.split(',')
						this.tagsList = tagsList
					}
				}).finally(() => {
				  uni.hideLoading()
				})
			},
			// 计算列表滚动高度
			getContentHight() {
				const pageHeight = document.body.clientHeight
				const pageHeaderHeight = document.getElementById('header').offsetHeight
				// this.$u.getRect('.page').then((res) => {
				//   console.log('进入page')
				//   const pageHeight = res.height
				//   this.$u.getRect('.page-header').then((res2) => {
				//     console.log('进入pagehearder')
				//     const pageHeaderHeight = res2.height
				//     this.$u.getRect('.page-footer').then((res3) => {
				//       console.log('进入pagefooter')
				//       const pageFooterHeight = res3.height
				const contentHeight = pageHeight - pageHeaderHeight
				this.contentHeight = 'height:' + contentHeight + 'px'
				//     })
				//   })
				// })
			},
			// apiGetInfo() {
				
			// 	this.$u.api.info().then((res) => {
			// 		this.cmemberId = res.data['id']
			// 	})
			// },
			preview_img: function(url) {
				uni.previewImage({
					urls: [url]
				})
			},
			preview_video: function(url) {
				var that = this;
				that.video_url = url;
			}
		}, // 挂载一些方法
		onLoad(options) {
			const {
				id
			} = this.$Route.query || options
			if (Number(id)) {
				this.id = id
				this.apiGetFetchMemberInfo()
			}
			this.cmemberId =  uni.getStorageSync('memberId') || 0;
			// this.apiGetInfo()
		}, // 生命周期回调—监听页面加载
		onShow() {}, // 生命周期回调—监听页面显示
		onReady() {}, // 生命周期回调—监听页面初次渲染完成
		onHide() {}, // 生命周期回调—监听页面隐藏
		onUnload() {}, // 生命周期回调—监听页面卸载
	}
</script>

<style lang="scss" scoped>
	.page {
		background-image: url('http://minio.tianhong.mobi/mall/xiaoq/home_bg.png');
		background-size: contain;
		background-repeat: no-repeat;
	}

	.page-header,
	.page-content {
		background: transparent;
	}

	.content_box {
		background-image: url('http://minio.tianhong.mobi/mall/xiaoq/home_bg.png');
		width: 100%;
		// height: 100%;
		background-size: cover;
		background-repeat: no-repeat;
	}

	.top {
		padding: 63rpx 40rpx 0 35rpx;
	}

	.back_icon_padding {
		padding: 10rpx 20rpx;
	}

	.back_icon {
		width: 16rpx;
		height: 23rpx;
	}

	.setting_icon {
		width: 37rpx;
		height: 34rpx;
	}

	.last {
		width: 208rpx;
		height: 45rpx;
		background: #fff;
		border-radius: 23rpx;
		font-size: 21rpx;
		font-family: Microsoft YaHei UI;
		font-weight: 400;
		color: #505050;
		line-height: 45rpx;
		text-align: center;
	}

	.avatar {
		width: 130rpx;
		height: 130rpx;
		border-radius: 50%;
		background: #000;
	}

	.name {
		font-size: 31rpx;
		font-family: Microsoft YaHei UI;
		font-weight: 400;
		color: #ffffff;
	}

	.tags {
		width: 140rpx;
		height: 35rpx;
		background: linear-gradient(0deg, #e2c43e, #fea700);
		border-radius: 3rpx;
		font-size: 21rpx;
		font-family: Microsoft YaHei UI;
		font-weight: 400;
		color: #4137ce;
	}

	.icon {
		width: 24rpx;
		height: 24rpx;
	}

	.msg_tags_box {
		padding: 0 104rpx;
	}

	.msg_tags {
		padding: 7rpx 14rpx;
		box-sizing: border-box;
		height: 35rpx;
		background: rgba($color: #000000, $alpha: 0.3);
		border-radius: 3rpx;
		text-align: center;
		font-size: 21rpx;
		font-family: Microsoft YaHei UI;
		font-weight: 400;
		color: #ffffff;
		line-height: 21rpx;
		margin-bottom: 15rpx;
	}

	.signature {
		font-size: 21rpx;
		font-family: Microsoft YaHei UI;
		font-weight: 400;
		color: #dcdcdc;
	}

	.box {
		font-size: 25rpx;
		font-family: Microsoft YaHei UI;
		font-weight: 400;
		color: #ffffff;
	}

	.vip_box {
		background-image: url(../../static/images/vipbg.png);
		width: 100%;
		height: 104rpx;
		background-size: contain;
		background-repeat: no-repeat;
		padding: 0 26rpx;
	}

	.wechat_icon {
		width: 40rpx;
		height: 34rpx;
	}

	.vip_icon {
		width: 65rpx;
		height: 22rpx;
	}

	.wechat {
		font-size: 25rpx;
		font-family: Microsoft YaHei UI;
		font-weight: bold;
		color: #c54153;
	}

	.personal_vip {
		width: 65rpx;
		height: 22rpx;
	}

	.vip_text {
		font-size: 21rpx;
		font-family: Microsoft YaHei UI;
		font-weight: 400;
		color: #ffdf50;
	}

	.open_vip {
		width: 130rpx;
		height: 45rpx;
		background: #ffdf50;
		border-radius: 23rpx;
		font-size: 21rpx;
		font-family: Microsoft YaHei UI;
		font-weight: 400;
		color: #d7443e;
		text-align: center;
		line-height: 45rpx;
	}

	.imgs_box {
		width: 20%;
		height: 180rpx;
		border-radius: 10rpx;
		background: #000;
		margin: 20rpx 30rpx 0 0;
	}

	.imgs:nth-child(4n + 4) {
		margin: 0;
	}

	.imgs {
		width: 100%;
		height: 100%;
	}

	.mask {
		width: 100%;
		position: absolute;
		background-image: url(../../static/images/mosaic.jpeg);
		top: 0;
		left: 0;
		opacity: 0.9;
		height: 100%;
		z-index: 9;
	}

	.mask_text {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 90%;
		text-align: center;
		color: #fcc307;
	}

	.play {
		position: absolute;
		top: 54rpx;
		left: 54rpx;
		width: 42rpx;
		height: 42rpx;
		z-index: 10;
	}

	.burn {
		position: absolute;
		top: 44rpx;
		left: 0rpx;
		width: 100%;
		text-align: center;
		z-index: 10;
		font-size: 21rpx;
		font-family: Microsoft YaHei UI;
		font-weight: 400;
		color: #d7443e;
	}

	.fire {
		width: 44rpx;
		height: 51rpx;
	}

	.evaluate {
		font-size: 25rpx;
		font-family: Microsoft YaHei UI;
		font-weight: 400;
		color: #ffffff;
	}

	.evaluate_text {
		font-size: 21rpx;
		font-family: Microsoft YaHei UI;
		font-weight: 400;
		color: #ffdf50;
	}

	.evaluate_item {
		width: 200rpx;
		height: 35rpx;
		background: rgba($color: #000000, $alpha: 0.3);
		border-radius: 3rpx;
		font-size: 21rpx;
		font-family: Microsoft YaHei UI;
		font-weight: 400;
		color: #ffc107;
	}

	.star_icon {
		width: 20rpx;
		height: 20rpx;
	}

	.see_all {
		font-size: 25rpx;
		font-family: Microsoft YaHei UI;
		font-weight: 300;
		color: #d7443e;
	}

	.item {
		align-items: flex-start;
		padding: 0 40rpx 20rpx 34rpx;
		border-bottom: 1rpx solid rgba($color: #fff, $alpha: 0.2);

		.avatar {
			width: 95rpx;
			height: 95rpx;
			background-color: #fff;
		}

		.item_right {
			width: 100%;
		}

		.name {
			font-size: 31rpx;
			font-family: Microsoft YaHei UI;
			font-weight: 400;
			color: #ffffff;
		}

		.vip {
			width: 39rpx;
			height: 35rpx;
		}

		.tags {
			width: 140rpx;
			height: 35rpx;
			background: linear-gradient(0deg, #e2c43e, #fea700);
			border-radius: 3rpx;
			font-size: 21rpx;
			font-family: Microsoft YaHei UI;
			font-weight: 400;
			color: #4137ce;
		}

		.icon {
			width: 24rpx;
			height: 24rpx;
		}

		.time {
			font-size: 21rpx;
			font-family: Microsoft YaHei UI;
			font-weight: 400;
			color: #dcdcdc;
		}

		.age {
			font-size: 21rpx;
			font-family: Microsoft YaHei UI;
			font-weight: 400;
			color: #dcdcdc;
		}

		.information {
			font-size: 31rpx;
			font-family: Microsoft YaHei UI;
			font-weight: 400;
			color: #ffffff;
		}

		.imgs {
			width: 200rpx;
			height: 200rpx;
			margin-right: 20rpx;
			margin-bottom: 20rpx;
		}

		.address {
			font-size: 21rpx;
			font-family: Microsoft YaHei UI;
			font-weight: 400;
			color: #dcdcdc;
		}

		.location2 {
			width: 23rpx;
			height: 25rpx;
		}

		.attention_icon {
			width: 40rpx;
			height: 35rpx;
		}

		.other {
			font-size: 25rpx;
			font-family: Microsoft YaHei UI;
			font-weight: 400;
			color: #ffffff;
		}

		.say_hello_icon {
			width: 35rpx;
			height: 40rpx;
		}
	}

	.btn_box {
		padding: 0 36rpx 70rpx 76rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 100;
	}

	.left_btn {
		width: 280rpx;
		height: 90rpx;
		background: #ffdf50;
		border-radius: 45rpx;
		font-size: 33rpx;
		font-family: Microsoft YaHei UI;
		font-weight: 400;
		color: #ffffff;
	}

	.chat2 {
		width: 40rpx;
		height: 39rpx;
	}

	.right_btn {
		width: 280rpx;
		height: 90rpx;
		background: #ffffff;
		border-radius: 45rpx;
		font-size: 33rpx;
		font-family: Microsoft YaHei UI;
		font-weight: 400;
		color: #000000;
	}

	.heart2 {
		width: 40rpx;
		height: 36rpx;
	}

	.pop_box {
		padding: 40rpx 50rpx 35rpx;
	}

	.pop_btn {
		width: 650rpx;
		height: 90rpx;
		background: #fcc307;
		border-radius: 45rpx;
		font-size: 33rpx;
		font-family: Microsoft YaHei UI;
		font-weight: 400;
		color: #000000;
		line-height: 90rpx;
	}

	.pop_btn_cancel {
		color: #ffffff;
		background: #c8c8c8;
		margin-top: 65rpx;
	}

	.hint_text {
		width: 100%;
		font-size: 25rpx;
		font-family: Microsoft YaHei UI;
		font-weight: 400;
		color: #c8c8c8;
		text-align: center;
	}

	.scrollPreviewImage {
		white-space: nowrap;
		width: 100%;
	}

	.previewImage_item {
		width: 100%;
		height: 100vh;
		text-align: center;
		background: #000;
		position: relative;
		// display: flex;
	}

	.previewImage {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		margin: auto;
	}

	.imgs {
		width: 100%;
		min-height: 200rpx;
		display: flex;
		flex-wrap: wrap;

		.imgs_view {
			flex: 0 0 33%;
			margin-bottom: 20rpx;

			.imgs_view_img {
				position: relative;
				display: block;
				width: 208rpx;
				height: 208rpx;
				margin: 0 auto;

				image {
					display: block;
					width: 100%;
					height: 100%;
				}

				video {
					display: block;
					width: 100%;
					height: 100%;
				}

				div {
					position: absolute;
					width: 100%;
					height: 100%;
					top: 0;
					left: 0;
					z-index: 10;
				}
			}
		}
	}
	.popup {
		position: fixed;
		width: 100vw;
		height: 100vh;
		top: 0;
		left: 0;
		z-index: 1000;
		background: rgba(0, 0, 0, .7);
		box-sizing: border-box;
		padding-top: 50vh;
	
		video {
			display: block;
			width: 100%;
			margin-top: -50%;
		}
	
		image {
			position: absolute;
			width: 50px;
			height: 50px;
			top: 80px;
			right: 20px;
		}
	}
</style>
